<template>
  <view>
    <view class="flex p-12 bg-white mb-12">
      <view class="mt-4 mr-8"> <u-icon name="map" size="36rpx"></u-icon></view>

      <view class="flex-1" @click="selectShopAddress">
        <view class="flex justify-between">
          <view class="u-line-1">
            送至 {{ address.provinceName }}{{ address.cityName
            }}{{ address.areaName }}{{ address.detailAddress }}
          </view>
        </view>
        <view class="text-12 pt-5 color-gray flex items-center">
          <view class="u-line-1" style="max-width: calc(100% - 400rpx)">{{
            address.consigneeName
          }}</view>
          <view>{{ address.consigneePhone }}</view>
        </view>
      </view>

      <view
        class="w-20 flex items-center justify-center"
        @click="selectShopAddress"
      >
        <u-icon name="arrow-right" size="24rpx" color="#999"></u-icon>
      </view>
    </view>

    <view
      class="flex p-12 bg-white"
      v-for="(item, index) in orderList"
      :key="index"
    >
      <u-image width="180rpx" height="180rpx" :src="item.goodsImgUrl"></u-image>
      <view class="pl-10 pt-10 flex-1">
        <view class="u-line-2">
          <view class="ellipsis-2 color-black">{{ item.goodsName }}</view>
        </view>

        <view class="ellipsis-2 color-tip pt-8">{{
          item.goodsSkuInfo ? item.goodsSkuInfo.skuText : "无规格"
        }}</view>
        <view class="flex justify-between pt-4">
          <view class="text-16">
            <text class="text-14">￥</text> {{ item.goodsPrice }}</view
          >
          <view class="text-14">x {{ item.quantity }}</view>
        </view>
      </view>
    </view>
    <view class="u-border-top px-12 py-16 bg-white">
      <view class="flex justify-between">
        <view class="text-14 color-gray">商品总价</view>
        <view class="text-16">
          <text class="text-14">￥</text>{{ orderData.totalAmount }}
        </view>
      </view>
      <!--      <view class="flex justify-between pt-10">-->
      <!--        <view class="text-14 color-gray">运费</view>-->
      <!--        <view class="text-16"> <text class="text-14">￥</text> 88.00</view>-->
      <!--      </view>-->
      <view class="flex justify-between pt-10">
        <view class="text-14 color-gray">订单备注</view>
        <u-input
          placeholder="选填,请先和商家沟通"
          border="none"
          inputAlign="right"
          v-model="remark"
          placeholderStyle="fontSize:12px;color:#999"
        ></u-input>
      </view>
    </view>
    <u-tabbar placeholder>
      <view class="flex justify-between items-center px-12 w-full border-box">
        <view class="color-gray text-14"
          >实付金额 <text class="text-14 text-red">￥</text>
          <text class="text-red text-18"> {{ orderData.payAmount }}</text>
        </view>
        <view>
          <u-button
            text="立即付款"
            shape="circle"
            type="primary"
            @click="payConfirm"
          ></u-button>
        </view>
      </view>
    </u-tabbar>
    <ShippingAddressPop
      ref="addreddPopRef"
      :show.sync="shippingAddressShow"
      @setAddress="setAddress"
    >
    </ShippingAddressPop>
  </view>
</template>

<script>
import ShippingAddressPop from "@/subpages/components/shippingAddressPop/index.vue";
import { fetchOrderDetail, fetchPayment } from "@/services/api";
import { getAppId, showToast } from "@/utils";

export default {
  components: {
    ShippingAddressPop,
  },
  data() {
    return {
      orderData: {},
      orderList: [],
      // 备注信息
      remark: "",
      // 打开地址弹窗
      shippingAddressShow: false,
      // 地址信息
      address: {},
    };
  },
  methods: {
    async getOrderDetail(params) {
      const { data, error } = await fetchOrderDetail(params);
      if (!error) {
        this.orderData = data;
        this.orderList =
          data.orderGoodsList?.map((item) => ({
            ...item,
            goodsSkuInfo: JSON.parse(item.goodsSkuInfo),
          })) || [];
        this.address = data.deliveryAddress || {};
      }
    },
    async payConfirm() {
      const accountInfo = uni.getAccountInfoSync();
      // accountInfo.miniProgram.appId,
      const { data, error } = await fetchPayment({
        payWay: "wxPay",
        payInterfaceCode: "WX_LITE",
        orderNo: this.orderData.serialNo,
        // bizRoleAppId: "1846190237240123222",
        appId: accountInfo.miniProgram.appId,
        remark: this.remark,
      });

      if (!error) {
        console.log("支付成功", data);
        const that = this;
        wx.requestPayment({
          provider: "wxPay",
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.packageValue,
          signType: data.signType,
          paySign: data.paySign,
          ...data,
          success: function (res) {
            console.log("success", res);
            showToast("支付成功", "success");
            setTimeout(() => {
              that.$Router.back();
            }, 1000);
          },
          fail: function (res) {
            console.log("fail", res);
            showToast("支付失败", "fail");
          },
        });
      }
    },
    setAddress(val) {
      console.log(val);
      this.address = val;
    },
    selectShopAddress() {
      this.shippingAddressShow = true;
    },
  },
  onLoad(option) {
    console.log(option);
    this.getOrderDetail({
      serialNo: option.serialNo,
    });
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.address {
  background-color: #fff;
}
</style>
